import React from "react";

export default class LearnEvent4 extends React.Component {
  parentRef;
  childRef;

  constructor() {
    super();
    this.parentRef = React.createRef();
    this.childRef = React.createRef();
  }

  parentClick() {
    console.log("react合成事件父元素监听");
  }

  childClick() {
    console.log("react合成事件子元素监听");
  }

  componentDidMount() {
    this.parentRef.current?.addEventListener("click", () => {
      console.log("原生事件父元素监听");
    });
    this.childRef.current?.addEventListener("click", () => {
      console.log("原生事件子元素监听");
    });
  }

  render() {
    return (
      <div>
        <div>合成事件对比原生事件的执行顺序</div>

        <div ref={this.parentRef} onClick={this.parentClick}>
          <div ref={this.childRef} onClick={this.childClick}>
            分析事件执行顺序
          </div>
        </div>
      </div>
    );
  }
}
